<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MyHealth :: Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="static/css/site.css" />


    <script type="text/javascript" src="static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="static/js/knockout-3.2.0.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
    <script src="multilang/languages.js" type="text/javascript"></script>
    <script src="static/js/home.js" type="text/javascript" defer="defer"></script>
</head>
<body>

<div class="container">

    <div class="page-header">

        <h1><img src="static/img/logo.jpg"></h1>
        <div align="right">
            <a href="#" data-bind="click: function() { lang.changeLang('nl'); }">
                <img src="static/img/NL.png">
            </a>/
            <a href="#" data-bind="click: function() { lang.changeLang('eng'); }">
                <img src="static/img/EN.png">
            </a>
        </div>
    </div>

    <!-- Slider Carousel - START -->
    <div id="carousel1" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img alt="" data-bind="attr:{ src: 'http://placehold.it/1200x400/8CC63E/ffffff&text=' + lang.text().myHealth }">
                <div class="carousel-caption">
                    <h3>Is er voor u.</h3>
                    <p data-bind="text: lang.text().personalPortal">
                    </p>
                </div>
            </div>
            <div class="item">
                <img alt="" data-bind="attr:{ src: 'http://placehold.it/1200x400/4f77cb/ffffff&text=' + lang.text().participation }">
                <div class="carousel-caption">
                    <h3>Kunt u ook.</h3>
                    <p data-bind="text: lang.text().together">
                    </p>

                </div>
            </div>
            <div class="item">
                <img alt="Bootstrap template" data-bind="attr:{ src: 'http://placehold.it/1200x400/F68937/ffffff&text=' + lang.text().easy }">
                <div class="carousel-caption">
                    <h3>Altijd overzicht</h3>
                    <p data-bind="text: lang.text().personalPortal">
                    </p>
                </div>
            </div>
        </div>
        <ul class="nav nav-pills nav-justified">
            <li data-target="#carousel1" data-slide-to="0" class="active">
                <a href="#"><span data-bind="text: lang.text().myHealth" />myHealth<small data-bind="text: lang.text().personalPortal"></small></a>
            </li>
            <li data-target="#carousel1" data-slide-to="1">
                <a href="#"><span  data-bind="text: lang.text().participation"/><small data-bind="text: lang.text().together"></small></a>
            </li>
            <li data-target="#carousel1" data-slide-to="2">
                <a href="#" ><span data-bind="text: lang.text().easy"/><small data-bind="text: lang.text().personalPortal"></small></a>
            </li>
        </ul>
    </div>
    <hr class="" />
    <div class="row">
        <div class="col-md-7">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title"><p data-bind="text: lang.text().welcome"></p><span class="fa pull-right medium"></span></h3>
                </div>
                <div class="panel-body" data-bind="text: lang.text().welcomeText">
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title" data-bind="text: lang.text().login"></h3>
                </div>
                <div class="panel-body">
                    <form>
                        <div class="form-group">
                            <label for="username" data-bind="text: lang.text().username">Email</label>
                            <input id="username" class="form-control" type="text" placeholder="username"
                                   data-bind="value: loginData.username, text: lang.text().username" />
                        </div>
                        <div class="form-group">
                            <label for="password" data-bind="text: lang.text().password">Password</label>
                            <input id="password" class="form-control" type="password" placeholder="password"
                                   data-bind="value: loginData.password, text: lang.text().password" />
                        </div>
                        <button id="loginButton1" class="btn btn-primary wide " data-bind="text: lang.text().login, click: login"></button>
                    </form>

                </div>
            </div>
        </div>
        <hr />
    </div>
</div>



</body>
</html>